<script setup>
import { ref, watch } from "vue";
import { mockEnabled, mockUrl } from "../api/mock.js";
import MaterialCard from "@/components/MaterialCard.vue";
import ListHeadLine from "@/components/list/ListHeadLine.vue";
import SwitchListItem from "@/components/list/SwitchListItem.vue";
import InputListItem from "@/components/list/InputListItem.vue";
import "@material/web/textfield/outlined-text-field.js";
import "@material/web/list/list.js";

</script>

<template>
  <div role="presentation" id="test-view">
    <p>
      <MaterialCard type="outlined">
        这是一个测试界面。你不会在生产构建中看到这个界面。
      </MaterialCard>
    </p>
    <md-list>
      <ListHeadLine>Mock API 设置</ListHeadLine>
      <SwitchListItem v-model="mockEnabled">
        <template #headline>使用 Mock API</template>
        <template #supporting-text>使用一个 Mock API 会将所有的 API 请求转向指定的地址上。</template>
      </SwitchListItem>
      <InputListItem :disabled="!mockEnabled" v-model="mockUrl" placeholder="未设置" type="url">
        <template #headline>Mock API 服务器地址</template>
      </InputListItem>
    </md-list>
  </div>
</template>

<style scoped>
#test-view {
  padding: 32px max(15%, 16px);
}

#test-view>p {
  display: flex;
  margin-bottom: 16px;
}
</style>
